{% extends '::base.html.twig' %}
{% block body %}
<link rel="stylesheet" type="text/css" hrf="/css/jquery.jqplot.min.css" />


<script class="include" type="text/javascript" src="/js/plugins/jquery.jqplot.min.js"></script>
<script type="text/javascript" src="/js/plugins/scripts/shCore.min.js"></script>
<script type="text/javascript" src="/js/plugins/scripts/shBrushJScript.min.js"></script>
<script type="text/javascript" src="/js/plugins/scripts/shBrushXml.min.js"></script>

<script type="text/javascript" src="/js/plugins/jqplot.pieRenderer.min.js"></script>

<script class="include" language="javascript" type="text/javascript" src="/js/plugins/jqplot.barRenderer.min.js"></script>
<script class="include" language="javascript" type="text/javascript" src="/js/plugins/jqplot.categoryAxisRenderer.min.js"></script>
<script class="include" language="javascript" type="text/javascript" src="/js/plugins/jqplot.pointLabels.min.js"></script>
<div class="content form-row row-fluid">
    <div class="span12">
        <div class="box gradient">
            <div class="title">
                <h4 style="text-align: center">
                    Statistique Client
                </h4>
            </div>

            <div class="content noPad clearfix">
                <table style="width: 100%">
                    <tr>
                        <td style="width: 10%">
                            <label>
                                Date:
                                <input class="text" type="text" id="date1" style="width:80%;margin-left: 0"/>
                            </label>
                        </td>
                        <td style="width: 10%">
                            <label>
                                Jusqu'à:
                                <input class="text" type="text" id="date2" style="width:80%;margin-left: 0" />
                            </label>
                        </td>
                        <td  style="width: 20%">
                            <label>Client:</label>
                            <div  style="width: 200px">
                                    {{ render(controller('GdsVenteBundle:Client:getAllClient')) }}
                                </div> 
                            </td>
                            <td  style="width: 20%">
                                <label>Departement:</label>
                                <div style="width: 200px">
                                    {{ render(controller('GdsVenteBundle:Devis:getAllDepartement')) }}
                                    </div> 
                                </td>
                            </tr>
                        </table>
                    </div> 
                </div>
            </div>
            <div class="span12" style="margin-left:0" id="div_statistique">
            </div>
        </div>

        <script>
            $(document).ready(function() {
                date1 = ''
                date2 = ''
                client = 0
                departement = ''
                var fullDate = new Date();
                var twoDigitMonth = fullDate.getMonth()
                twoDigitMonth++
                twoDigitMonth += "";
                if (twoDigitMonth.length == 1)
                    twoDigitMonth = "0" + twoDigitMonth;
                var twoDigitDate = fullDate.getDate() + "";
                if (twoDigitDate.length == 1)
                    twoDigitDate = "0" + twoDigitDate;
                var currentDate = twoDigitDate + "/" + twoDigitMonth + "/" + fullDate.getFullYear();
                $("#date2").val(currentDate)
                var fullDate = new Date();
                var twoDigitMonth = fullDate.getMonth()
                if (twoDigitMonth == 0)
                    twoDigitMonth = 1
                twoDigitMonth += "";
                if (twoDigitMonth.length == 1)
                    twoDigitMonth = "0" + twoDigitMonth;
                var twoDigitDate = fullDate.getDate() + "";
                if (twoDigitMonth == "01")
                    twoDigitDate = "01"
                if (twoDigitDate.length == 1)
                    twoDigitDate = "0" + twoDigitDate;
                var datePrev = twoDigitDate + "/" + twoDigitMonth + "/" + fullDate.getFullYear();
                $("#date1").val(datePrev)
                date1 = changeFormatDate($('#date1').val())
                date2 = changeFormatDate($('#date2').val())
                $('#date1').change(function() {
                    date1 = changeFormatDate($('#date1').val())
                    if (client != 0)
                        statistique(date1, date2, client, departement)
                })
                $('#date2').change(function() {
                    date2 = changeFormatDate($('#date2').val())
                    if (client != 0)
                        statistique(date1, date2, client, departement)
                })
                $('#client').change(function() {
                    client = $('#client').val()
                    if (client != 0)
                        statistique(date1, date2, client, departement)
                })
                $('#departement').change(function() {
                    departement = $('#departement').val()
                    if (client != 0)
                        statistique(date1, date2, client, departement)
                })

            })
            $("#date1").datepicker({
                changeMonth: true,
                onClose: function(selectedDate) {
                    $("#date2").datepicker("option", "minDate", selectedDate);
                }
            });
            $("#date2").datepicker({
                defaultDate: "+1w",
                changeMonth: true,
                onClose: function(selectedDate) {
                    $("#date1").datepicker("option", "maxDate", selectedDate);
                }
            });
            function changeFormatDate(date) {
                if (date == '')
                    return date
                date = date.split('/')
                date = date[2] + '-' + date[1] + '-' + date[0]
                return date
            }
            function statistique(date1, date2, client, departement) {
                $.ajax({
                    url: '{{path('gds_statistique_client')}}',
                    type: "POST",
                    datatype: 'json',
                    data: 'date1=' + date1 + '&date2=' + date2 + '&client=' + client + '&departement=' + departement,
                    success: function(data) {
                        $('#div_statistique').html(data)
                    }
                })
            }
            </script>
            {% endblock %}